<template>
  <div>
    <div class="gui-padding bgf">
      <!--导航区域-->
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>船员管理</a-breadcrumb-item>
          <a-breadcrumb-item>船员动态</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <!--搜索区域-->
      <div class="mb10 flex align-items justify-content-between">
        <div></div>
        <a-form layout="inline" autocomplete="off" ref="searchFormRef" :model="queryParams">
          <a-form-item label="船员姓名：" name="keyword">
            <a-input v-model:value.trim="queryParams.keyword" size="small" style="width: 180px;height: 32px"
                     placeholder="请输入船员姓名,身份证号" allow-clear/>
          </a-form-item>
          <a-form-item label="证书等级" name="zhengShuDengJi">
            <a-select placeholder="请选择"   allow-clear style="width: 120px" v-model:value="queryParams.zhengShuDengJi">
              <a-select-option :value="item.name" :key="item.name" v-for="item in zsdjList">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="职位" name="zhiWei">
            <a-select
                ref="select"
                placeholder="请选择"
                allow-clear
                v-model:value="queryParams.zhiWei"
                style="width: 120px"
            >
              <a-select-option v-for="item in zhiweiList" :key="item.id" :value="item.zhiWeiMing">
                {{ item.zhiWeiMing }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="状态" name="zhuangTai">
            <a-select
                ref="select"
                placeholder="请选择"
                allow-clear
                v-model:value="queryParams.zhuangTai"
                style="width: 120px"
            >
              <a-select-option :value="1">待派</a-select-option>
              <a-select-option :value="2">在船</a-select-option>
              <a-select-option :value="3">在家</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <div class="flex">
              <a-button type="primary" size="small" @click="handleSearch">
                <SearchOutlined/>
                搜索
              </a-button>
              <a-button type="primary" danger size="small" @click="handleReset" class="ml10">
                <UndoOutlined/>
                重置
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>
      <!--表格区域-->
      <a-table :columns="columns"
               rowClassName="items"
               :loading="false"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 268px)' }"
               :pagination="false"
               :data-source="tableData"
               :customHeaderRow="customHeaderRow"
               size="small" sticky bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'xingMing'">
            <div class="pointer" @click="handleShowInfo(record.id)">{{ record.xingMing }}</div>
          </template>
          <template v-if="column.dataIndex === 'zhuangTai'">
            <span v-if="record.zhuangTai==1">待派</span>
            <span v-if="record.zhuangTai==2">在船</span>
            <span v-if="record.zhuangTai==3">在家</span>
          </template>
          <template v-if="column.dataIndex==='shenFenHao'">
            <cc-id-card :idcard="record.shenFenHao"></cc-id-card>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
            <span class="mr5" v-if="record.caoZuo == '处理'">
             <a-button type="primary" size="small" @click="handleShowBaseEdit(record)">处理</a-button>
            </span>
              <span class="mr5" v-else>
             <a-button type="primary" size="small" @click="handleShowBaseShowEdit(record)">跟踪记录详情</a-button>
            </span>
            </div>
          </template>
        </template>
      </a-table>
      <!--分页区域-->
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            :show-total="total => `共 ${total} 项`"
            show-size-changer
            :total="total"/>
      </div>
      <edit-info ref="editRef" @success="handleLoadData"></edit-info>
      <show-info ref="showRef" @success="handleLoadData"></show-info>
      <add-user-base-dongtai-info ref="baseRef"></add-user-base-dongtai-info>
      <add-user-base-dongtai-show ref="infoRef"></add-user-base-dongtai-show>
    </div>
  </div>
</template>
<script lang="ts" setup>
import ShowInfo from './compoments/ShowInfo.vue'
import EditInfo from './compoments/EditInfo.vue'
import AddUserBaseDongtaiInfo from "./compoments/AddUserBaseDongtaiInfo.vue"
import AddUserBaseDongtaiShow from "./compoments/AddUserBaseDongtaiShow.vue"
const zhiweiList = ref([])
const searchFormRef = ref(null)
const tableData = ref([]);
const total = ref(0)
const pages = ref(0)
const tableLoading = ref(false)
const showRef = ref({})
const editRef = ref({})
const infoRef = ref({})
const baseRef = ref({})
const sortFlag = ref(false)
const pageSizeOptions = ref(['15', '20', '30', '40', '50']);
const userState = useStore.userState()
const zsdjList = computed(() => userState.getParameterList('zsdj'))
const queryParams = reactive({
  "pageNo": 1,
  "pageSize": 20,
  "keyword": null,
  "zhuangTai": null,
  "zhiWei": null,
  "zhengShuDengJi": null,
  "paiXu": 1
})


const customHeaderRow = (columns, index) => {
  return {
    onClick: () => {
      if (columns[10].dataIndex == 'chuLiRiQi') {
        sortFlag.value = !sortFlag.value
        queryParams.paiXu = sortFlag.value ? 2 : 1
        handleLoadData()
      }
    },
  };
}

// 获取选择的行id
const state = reactive({
  selectedRowKeys: [],
  loading: false,
})

// 定义表格的列信息
const columns = [
  {
    title: '序号',
    fixed: "left",
    align: "center",
    width: 60,
    dataIndex: 'index',
    customRender: ({text, record, index}) => index + 1
  },
  {
    title: '姓名',
    align: "center",
    dataIndex: 'xingMing',
    width: '180px',
  },
  {
    title: '身份证号',
    align: "center",
    dataIndex: 'shenFenHao',
    width: '200px',
  },
  {
    title: '年龄',
    align: "center",
    dataIndex: 'nianling',
    width: '80px',
  },
  {
    title: '证书职位',
    align: 'center',
    dataIndex: 'zhiWei',
    width: '120px',
  },
  {
    title: '证书等级',
    align: 'center',
    dataIndex: 'zhengShuDengJi',
    width: '120px',
  },
  {
    title: '联系方式',
    align: 'center',
    dataIndex: 'shouJiHao',
    width: '120px',
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'zhuangTai',
    width: '120px',
  },
  {
    title: '最近记录内容',
    align: 'center',
    dataIndex: 'neiRong',
    width: '120px',
  },
  {
    title: '下次处理日期',
    align: 'center',
    dataIndex: 'chuLiRiQi',
    width: '120px',
    sorter: {
      compare: (a, b) => {
      }
    },
  },
  {
    title: '动态提醒',
    align: 'center',
    dataIndex: 'tiXing',
    width: '200px',
  },
  {
    title: '记录人',
    align: 'center',
    dataIndex: 'jiLuZheNiCheng',
    width: '120px',
  },
  {
    title: '记录日期',
    align: 'center',
    dataIndex: 'genZongRiQi',
    width: '120px',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: "center",
    fixed: "right",
    width: '160px',
  },
]

// 查询表格信息
const handleLoadData = async () => {
  tableLoading.value = true
  const resp = await useLoadChuanYuanKuDongTaiApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total
}


// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1;
  handleLoadData()
}

const handleReset = () => {
  searchFormRef.value.resetFields()
  handleLoadData()
}

// 改变分页
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

const handleShowInfo = (id) => {
  // showRef.value.handleOpen(id)
  editRef.value.handleOpen(id)
}

const handleShowBaseEdit = (record) => {
  baseRef.value.handleOpen(record)
}

const handleShowBaseShowEdit = (record) => {
  infoRef.value.handleOpen(record)
}

const handleLoadZhiweiData = async () => {
  var res = await useLoadChuanBoZhiWeiBiaoApi()
  zhiweiList.value = res.data
}

onMounted(() => {
  handleLoadData()
  handleLoadZhiweiData()
})
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
